<template>
  <div style="width: 100%; height: 100%" class="dashboard_box flex-x flex-top">
    <!-- 设备实时告警列表 -->
    <dv-border-box-12
      v-init-screen-h="0"
      style="height: 100%; padding: 20px; width: 55%"
      :key="brder1Key"
    >
      <GiveTable :tableData="tableData" style="width: 100%"></GiveTable>
      <Pagination
        style="width: 100%"
        class="dark_theme"
        @pagination="pagination"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :pageSizes.sync="pageSizes"
      />
    </dv-border-box-12>

    <div style="width: 45%">
      <!-- 设备报警统计 -->
      <dv-border-box-12
        style="height: 100%"
        v-init-screen-h="0"
        :key="brder1Key"
      >
        <AlarmStatistics
          :alarmStatInfoList="alarmStatInfoList"
          style="width: 100%"
        ></AlarmStatistics>
        <AlarmDistribution
          :alarmStatInfoList="alarmStatInfoList"
          @changeType="changeType"
          :manufactureSite.sync="manufactureSite"
        ></AlarmDistribution>
      </dv-border-box-12>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Pagination from "@/views/common/page";
import { paginationMixins } from "@/mixin/pagination";
import { generateId } from "@/utils";
import GiveTable from "./components/GiveTable.vue";
import AlarmStatistics from "./components/AlarmStatistics.vue";
import AlarmDistribution from "./components/AlarmDistribution.vue";
import { getAlarmRealInfo, getAlarmStatInfo } from "@/api/alarm";
import { currentDate } from "@/utils/currentDate";
import { WARNING_TIME } from "../js/utils";
export default {
  mixins: [paginationMixins],
  components: {
    GiveTable,
    AlarmStatistics,
    AlarmDistribution,
    Pagination
  },
  computed: {
    ...mapGetters(["manufactureSiteList"])
  },
  data() {
    return {
      manufactureSite: "",
      brder1Key: generateId(),
      tableData: [],
      alarmStatInfoList: []
    };
  },
  watch: {
    // 有bug 晚点改
    "$store.state.app.sidebar.opened"() {
      setTimeout(() => {
        this.brder1Key = generateId();
      }, 400);
    }
  },
  mounted() {
    this.manufactureSite = this.manufactureSiteList[0].name;
    // 获取设备实时告警列表
    this.init();
    // 获取设备报警统计
    this.getAlarmStatInfo();
    // 启动轮询
    this.initInterval();
  },
  methods: {
    // 切换单元
    changeType() {
      this.getAlarmStatInfo();
    },
    // 获取设备报警统计
    async getAlarmStatInfo() {
      const res = await getAlarmStatInfo({
        startDate: currentDate(
          this.$moment()
            .subtract(30, "days")
            .format("YYYY-MM-DD")
        ),
        manufactureSite: this.manufactureSite
      });
      const { results, numResults } = res.data;
      this.alarmStatInfoList = results.map(item => {
        return {
          ...item,
          deviceWarmalarmCount: Number(item.deviceWarmalarmCount), //设备告警
          comWarmalarmCount: Number(item.comWarmalarmCount), //通讯
          upLimitalarmCount: Number(item.upLimitalarmCount), //工艺
          time2: this.$moment(item.time).format("YYYY-MM-DD")
        };
      });
      console.log("获取设备报警统计 :>> ", this.alarmStatInfoList);
    },
    // 获取设备实时告警列表
    async init() {
      const res = await getAlarmRealInfo({
        page: this.pageNum,
        pageSize: this.pageSize
      });
      const { results, numResults } = res.data;
      this.tableData = results;
      this.total = numResults;
    },
    // 启动轮询
    initInterval() {
      let timer = setInterval(() => {
        console.log("告警中心开启轮询");
        this.init();
        this.getAlarmStatInfo();
      }, WARNING_TIME);
      this.$once("hook:beforeDestroy", () => {
        console.log("告警中心关闭轮询", timer);
        timer && clearInterval(timer);
        timer = null;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.dashboard_box {
  position: relative;
  color: #fff;
  background: url(../../../assets/images/applicationCenter/app_bg.jpg) no-repeat
    100%;
  background-size: cover;
}
</style>
